<template>
  <div>
    <header-tilte :title="title"></header-tilte>
    <loading v-if="isShowLoading"></loading>
    <div class="flex_center" v-if="!isShowLoading">
      <div class="bodyContent">
      <div class="bucket_title white_bac flex flex_around">
        <div class="flex flex_column flex_around">
          <p style="color: #1296db;padding-top: 0.5rem">{{memberInfo.total_bucket_num}}</p>
          <p>总水桶</p>
        </div>
        <div class="flex flex_column flex_around">
          <p style="color: rgb(255, 179, 17);padding-top: 0.5rem">{{memberInfo.self_bucket_num}}</p>
          <p>自备桶</p>
        </div>
        <div class="flex flex_column flex_around">
          <p style="color: #6AC20B;padding-top: 0.5rem">{{memberInfo.cash_bucket_num}}</p>
          <p>押金桶</p>
        </div>
        <div class="flex flex_column flex_around positon_re" @click="openSimpleDialog">
          <p style="color: #f01414;padding-top: 0.5rem">{{memberInfo.borrow_bucket_num}}</p>
          <p>借用桶</p>
          <i class="fa fa-question-circle-o positon_ab bucket-i"></i>
        </div>
      </div>
      <mu-container ref="container" class="demo-loadmore-content bucket_marg" v-bind:style="{height:conH}">
        <mu-load-more @refresh="refresh" :refreshing="refreshing" :loading="loading" @load="load">
          <mu-list>
            <template v-for="bucket in bucketList">
              <div class="bucket_pad">
                <div class="white_bac flex flex_between padding5">
                  <div class="flex flex_column flex_around">
                    <p>{{bucket.description}}</p>
                    <p style="margin-top: 1rem;color: gray">{{bucket.created_at}}</p>
                  </div>
                  <div class="flex flex_column flex_around">
                    <p style="color: gray">送桶 <span style="color: rgb(240, 20, 20)">+{{bucket.send_num}}</span></p>
                    <p style="margin-top: 1rem;color: gray">回桶 <span style="color: rgb(18, 150, 219)">-{{bucket.bucket_num}}</span></p>
                  </div>
                </div>
              </div>
            </template>
            <template v-if="bucketList==undefined || bucketList == null || bucketList == '' || bucketList.length <= 0">
              <p style="padding: 2rem">暂无数据</p>
            </template>
          </mu-list>
        </mu-load-more>
      </mu-container>

      <mu-dialog title="提示" width="360" :open.sync="openSimple" class="bucket_alert">
        <p>总水桶：用户住所存放的所有水桶</p>
        <p>自备桶：总水桶中用户自备的水桶</p>
        <p>押金桶：总水桶中已付押金的水桶</p>
        <mu-button slot="actions" flat color="primary" @click="closeSimpleDialog">确定</mu-button>
      </mu-dialog>
      </div>
    </div>
  </div>
</template>

<script>
    import HeaderTilte from "../../components/headerTilte";
    import Loading from "../../components/loading";

    export default {
      data(){
        return{
          title:'账户中心-水桶',
          openSimple: false,
          memberInfo:'',
          refreshing: false,
          loading: false,
          bucketList:[],
          page:1,
          isShowLoading:true
        }
      },
      mounted(){
        this.checkLogin();
        this.initH();
        this.initBucketMember();
        this.initBucketList(1);
      },
      methods: {

        initH(){
          var allh = document.documentElement.clientHeight;
          var headerH = $('.header').outerHeight(true);
          var titleH = $('.bucket_title').height();
          var h = allh - headerH -58;
          this.conH = h + 'px';
        },

        openSimpleDialog () {
          this.openSimple = true;
        },
        closeSimpleDialog () {
          this.openSimple = false;
        },
        initBucketMember(){
          this.yesS.bucketMember(
            this.$comParams()
          ).then(res => {

            this.memberInfo = res.data.info;
          })
        },
        initBucketList(page){
          this.yesS.bucketRecordList(
            this.$comParams()
          ).then(res =>{
            var objs = res.data.record_list.data;
            if(page == 1){
              this.bucketList = objs;
            }else{
              if(!this.isEmpty(objs) && objs.length > 0){
                for (var i=0;i<objs.length;i++){
                  this.bucketList.push(objs[i]);
                }
              }
            }
            this.page = page+1;
            this.isShowLoading = false
          })
        },
        refresh () {
          this.refreshing = true;
          this.$refs.container.scrollTop = 0;
          setTimeout(() => {
            this.refreshing = false;
            this.initBucketList(1);
          }, 2000)
        },
        load () {
          this.loading = true;
          this.initBucketList(this.page);
          setTimeout(() => {
            this.loading = false;
          }, 2000)
        }

      },
      components: {
        Loading,
        HeaderTilte},
      name: "bucket"
    }
</script>

<style scoped>
  .bucket_title{
    height: 4rem;
    width: 100%;
  }
  .bucket-i{
    right: -10px;
    top: 5px;
    font-size: 1.2rem;
    color: #1296db;
  }
  .bucket_alert p{
    font-size: 0.96rem;
  }
  .bucket_pad{
    padding: 0.3rem;
  }

  .padding5{
    padding: 0.5rem;
  }

 /* .demo-loadmore-content{
    overflow: hidden;
    overflow-y: auto;
  }*/

</style>
